<template>
  <page-view class="login">
    <page-header title="登录" :show-back="true"></page-header>
    <div class="content-box">
      <van-form @submit="onSubmit">
        <van-cell-group inset>
          <van-field
            v-model="user_phone"
            name="user_phone"
            label="账户"
            placeholder="账户"
            :rules="[
              { required: true, message: '请填写用户名' },
              { pattern: validatorPhone, message: '账户格式不对' },
            ]"
          />
          <van-field
            v-model="password"
            type="password"
            name="password"
            label="密码"
            placeholder="密码"
            :rules="[
              { required: true, message: '请填写密码' },
              { validator: validatorPassword },
            ]"
          />
          <Drag @unlock="unloack" />
        </van-cell-group>
        <div style="margin: 16px">
          <van-button
            round
            block
            type="primary"
            native-type="submit"
            :disabled="isLoading"
            :loading="isLoading"
            loading-text="正在登录"
          >
            提交
          </van-button>
        </div>
      </van-form>

      <div class="tips">
        还没有账户，去&nbsp;&nbsp;
        <router-link class="text-primary" :to="{ name: 'register' }"
          >注册</router-link
        >
      </div>
    </div>
  </page-view>
</template>

<script setup>
import Drag from "../components/Drag.vue";
import { ref } from "vue";
import MD5 from "md5.js";
import { useRoute, useRouter } from "vue-router";
import { useStore } from "vuex";
import { showLoadingToast, showSuccessToast, showFailToast } from "vant";
import api from "../utils/api";
const store = useStore();
const route = useRoute();
const router = useRouter();
const isLoading = ref(false);
const validatorPhone = /^1([358][0-9]|4[678]|7[123])[0-9]{8}$/;
const validatorPassword = (val) => {
  if (val.length < 6 || val.length > 18)
    return "密码的长度不对，需要再6-18位之间";
};
const user_phone = ref("");
const password = ref("");

const clock = ref(false);
function unloack() {
  clock.value = true;
}
const onSubmit = (values) => {
  if (clock.value === false) {
    showFailToast("请先解锁");
    return;
  }

  values.password = new MD5().update(values.password).digest("hex");
  // console.log("submit", values);
  showLoadingToast({
    message: "登录中...",
    forbidClick: true,
  });
  isLoading.value = true;
  setTimeout(async () => {
    try {
      let result = await api.userInfo.login(values);
      console.log(result);
      store.commit("setUserInfo", result.user_info);
      store.commit("setToken", result.token);
      showSuccessToast("登录成功");
      if (route.query.redirect) {
        router.push(route.query.redirect);
      } else {
        router.back();
      }
    } catch (error) {
    } finally {
      isLoading.value = false;
    }
  }, 1000);
};
</script>

<style lang="scss" scoped>
.login {
  display: flex;
  flex-direction: column;
  .content-box {
    flex: 1;
    overflow: auto;
    .tips {
      display: flex;
      justify-content: center;
      align-items: center;
      color: gray;
      .text-primary {
        color: skyblue;
      }
    }
  }
}
</style>